<template>
  <div class="document-detail-container">
    <div class="preview-header">
      <div style="display: flex; align-items: center" @click="handleBack">
        <i class="el-icon-back"></i>
        <div style="font-size: 15px;margin-left:20px">文档预览</div>
      </div>
      <el-button
        type="primary"
        size="small"
        style="margin-left: auto;"
        @click="handleDownload"
        :disabled="!fileUrl"
      >下载文档</el-button>
    </div>
    <div class="pdf-preview-container">
      <iframe
        v-if="fileUrl"
        :src="fileUrl"
        class="pdf-iframe"
        frameborder="0"
      ></iframe>
      <div v-else class="no-preview">
        暂无文档数据可预览
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DocumentDetail',
  data() {
    return {
      fileUrl: ''
    }
  },
  created() {
    // 从路由query获取url
    this.fileUrl = this.$route.query.url || '';
  },
  methods: {
    handleBack() {
      this.$router.back();
    },
    handleDownload() {
      if (this.fileUrl) {
        const iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.src = this.fileUrl;
        document.body.appendChild(iframe);
        setTimeout(() => {
          document.body.removeChild(iframe);
        }, 1000);
      } else {
        this.$message.warning('无可下载文件');
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.document-detail-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.preview-header {
  padding: 10px 20px;
  border-bottom: 1px solid #EBEEF5;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.pdf-preview-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 100%;
}
.pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
}
::v-deep .el-input__inner {
  background-color: white !important;
}
.no-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #909399;
  font-size: 14px;
}
</style>